.card {
  position: relative;
  background-color: $color-white;
  border-radius: $border-radius;
  font-size: $font-size-base;
  box-shadow: $box-shadow;
  &.border {
    border: 2rpx solid var(--border-color);
    &-primary {
      border: 2rpx solid rgba($color: $color-primary, $alpha: 0.25);
    }

    &-primary-light {
      border: 2rpx solid rgba($color: $color-primary, $alpha: 0.25);
    }

    &-primary-light-bold {
      border: 4rpx solid rgba($color: $color-primary, $alpha: 0.25);
    }
  }
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $padding $padding 0 $padding;
    position: relative;
    z-index: 1;
    &-title {
      font-size: 28rpx;
      font-weight: 600;
    }
    &-extra {
      font-size: 28rpx;
      color: $uni-secondary-color;
    }
  }

  &-body {
    position: relative;
    z-index: 1;
    padding: $padding;
  }

  &-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 $padding $padding $padding;
    &-title {
      font-size: 36rpx;
      font-weight: 600;
    }
    &-extra {
      font-size: 28rpx;
      color: $uni-secondary-color;
    }
  }

  //半透明
  &-transparent {
    background-color: rgba(255, 255, 255, 0.9);
  }

  &-blue {
    background-color: #8285f4;
    color: $uni-white;
  }

  &-red {
    background-color: #ff4d4f;
    color: $uni-white;
  }

  &-orange {
    background-color: #ff7a45;
    color: $uni-white;
  }

  &-yellow {
    background-color: #ffc53d;
    color: $uni-white;
  }

  &-green {
    background-color: #52c41a;
    color: $uni-white;
  }

  &-cyan {
    background-color: #13c2c2;
    color: $uni-white;
  }

  &-linear {
    background-image: linear-gradient(180deg, #f4ecff 0%, #ffffff 15%);
  }

  &-primary {
    background-color: var(--color-primary);
    color: var(--text-color-highlight);
  }

  &-tag {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    font-size: 24rpx;
    padding: 5rpx 10rpx;
    border-radius: 0 $border-radius 0 $border-radius;
    background-color: $color-primary;
    color: $color-white;
  }
}
